<template>
    <div class="top-bar">
        <router-link :to="{path: link.photo, query: link.query}" class="top-bar-item" :class="{'top-bar-item-active': isSelected.photo}">照片</router-link>
        <router-link :to="{path: link.video, query: link.query}" class="top-bar-item" :class="{'top-bar-item-active': isSelected.video}">视频</router-link>
        <a href="javascript:;" @click="getOverall" class="top-bar-item">全景</a>
    </div>
</template>

<script>
    import {Util} from '@/js/Util'
    export default {
        name: 'top-bar',
        created() {
            this.init();
        },
        data () {
            return {
                isSelected: {
                    photo: false,
                    video: false
                },
                link: {
                    photo: '/MeiJingSuiPai/photo',
                    video: '/MeiJingSuiPai/video',
                    generalView: '',
                    query: {}
                }
            }
        },
        methods: {
            init() {
                // set default options
                this.link.query = {
                    id: this.$route.query.id
                };
                this.isSelected[this.$route.name] = true;
                // set current route's link null
                this.link[this.$route.name] = '';
            },
            getOverall() {
                let phone = sessionStorage.getItem('MeiJingKu_teamPhone'),
                    id = this.$route.query.id;
                this.$http.get('team/TeamPanorama/v1?phone=' + phone + '&teamId=' + id).then(response => {
                    let result = response.data;
                    if('link' in result.data) {
                        location.href = result.data.link;
                    }else {
                        this.$vux.toast.text('暂时没有全景', 'bottom');
                    }
                }, response => {
                    Util.errorWarning(this);
                });
            }
        },
        watch: {
            '$route': 'init'
        }
    }
</script>

<style lang="less" scoped="scoped">
    .top-bar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 1rem 0;
        font-size: 1.4rem;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        background: #fff;
        width: 100%;
        border-bottom: .1rem solid #aaa;

        .top-bar-item {
            padding: 0.5rem 2.5rem;
            border-radius: 2rem;
            color: #000;
        }

        .top-bar-item-active {
            color: #fff;
            background: #111;
        }
    }
</style>